import { usePagination } from '@/hooks/usePagination'
import { formatDate } from '@/utils/common'
import type { FormInstance } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

export default function useDetail() {
  const isLoading = ref(false)
  const queryParams = reactive({
    name: '',
  })
  const { pagination, changePageNumber, changePageSize } = usePagination(onSearch)
  const formRef = ref<FormInstance>()
  const columns: TableColumnList = [
    {
      type: 'selection',
      width: 55,
      align: 'left',
    },
    {
      label: '接口ID',
      prop: 'id',
      minWidth: 100,
    },
    {
      label: '接口服务名称',
      prop: 'name',
      minWidth: 150,
    },
    {
      label: '接口路径',
      prop: 'url',
      minWidth: 150,
    },
    {
      label: '接口分类',
      prop: 'type',
      minWidth: 100,
    },
    {
      label: '接口发布时间',
      prop: 'createTime',
      minWidth: 180,
      formatter: ({ createTime }) => formatDate(createTime),
    },
    {
      label: '最后修改',
      prop: 'updateTime',
      minWidth: 180,
      formatter: ({ updateTime }) => formatDate(updateTime),
    },
    {
      label: '操作',
      fixed: 'right',
      width: 180,
      slot: 'operation',
    },
  ]

  /** 查询列表 */
  async function onSearch() {}

  /** 重置新增的表单  */
  function resetForm() {
    formRef.value.resetFields()
  }

  /** 导出按钮操作 */
  function onExport() {}

  onMounted(() => {
    onSearch()
  })

  return {
    isLoading,
    pagination,
    formRef,
    columns,
    queryParams,
    resetForm,
    changePageNumber,
    changePageSize,
    onSearch,
    onExport,
  }
}
